@let builderConfig = builderConfig$ | async;
@if (currentPage$ | async; as page) {
  @if (page.body.length > 0) {
    <div class="builder-list" id="gsap-scroller">
      <div class="wrapper" [ngClass]="previewClass$ | async">
        @if (builder.loading$ | async) {
          <div class="load">
            <app-loading />
          </div>
        }
        <div
          #builderList
          id="builder-list"
          cdkDropList
          [class.empty]="page.body.length === 0"
          [cdkDropListConnectedTo]="['widgets']"
          [cdkDropListData]="page.body"
          (cdkDropListDropped)="drop($event)"
        >
          @for (item of page.body; track item; let i = $index) {
            <div
              id="item-{{ i }}"
              class="component-item"
              cdkDrag
              [cdkDragDisabled]="true"
              [cdkDragData]="item"
            >
              @if (item) {
                <app-dynamic-component [attr.data-path]="i" [inputs]="item" />
                @if (builderConfig) {
                  <div
                    #actionBtn
                    class="add-new-section flex gap-2 items-center"
                    [attr.data-path]="i"
                  >
                    <button
                      mat-raised-button
                      (click)="addNewSection(actionBtn, 'section', builderConfig.newSection)"
                    >
                      <div class="flex">
                        <app-icon class="mr-1" [content]="{ svg: 'plus' }" />
                        <span>新增布局</span>
                      </div>
                    </button>
                    <button
                      class="new-widget !bg-white rounded-full shadow"
                      matTooltip="选择组件"
                      mat-icon-button
                      [matMenuTriggerFor]="menu"
                    >
                      <app-icon [content]="{ svg: 'chevron-down' }" />
                    </button>
                    <mat-menu #menu="matMenu">
                      <button
                        mat-menu-item
                        (click)="addNewSection(actionBtn, 'widget', builderConfig?.newSection)"
                      >
                        <div class="flex items-center">
                          <app-icon [content]="{ svg: 'widgets-outline' }" />
                          <span>选择组件</span>
                        </div>
                      </button>
                      <button mat-menu-item (click)="onPasteData(actionBtn)">
                        <div class="flex items-center">
                          <app-icon [content]="{ svg: 'content-paste' }" />
                          <span>粘贴组件</span>
                        </div>
                      </button>
                    </mat-menu>
                  </div>
                }
              }
            </div>
          }
        </div>
        @if (builder.switchPreivew$ | async) {
          <div class="iframe-wrapper">
            <app-iframe class="preview-iframe" [content]="{ url: '/preview' }" />
          </div>
        }
        @if (page.body.length > 0) {
          <app-widget-picker></app-widget-picker>
        }
      </div>
    </div>
  } @else {
    <app-default-page />
  }
}
<app-btn
  class="absolute right-10 bottom-10 z-50"
  [matMenuTriggerFor]="menu"
  [content]="{
    mode: 'mini-fab',
    color: 'primary',
    icon: {
      svg: 'dots-vertical',
    },
  }"
/>
<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="onNewPage()">
    <div class="flex items-center">
      <app-icon [content]="{ svg: 'pencil-plus', color: 'primary' }" /> <span>创建页面</span>
    </div>
  </button>

  <button mat-menu-item (click)="goBackUiux()">
    <div class="flex items-center">
      <app-icon [content]="{ svg: 'youtube-subscription', color: 'primary' }" />
      <span>查看组件</span>
    </div>
  </button>

  <button mat-menu-item (click)="onClearHistory()">
    <div class="flex items-center">
      <app-icon [content]="{ svg: 'delete-empty-outline', color: 'warn' }" />
      <span>清空草稿</span>
    </div>
  </button>
</mat-menu>
